<template>
  <section>
    <CloudDialog
      v-model:visible="visible"
      title="申请证书"
      :width="480"
      :mask-closable="false"
      :before-ok="handleSubmit"
      :before-open="handleOpen"
      :before-close="handleClose">
      <a-form ref="formRef" layout="vertical" :model="formState">
        <a-form-item
          label="站点"
          field="site_id"
          hide-asterisk
          :rules="{ required: true, message: '请选择站点' }"
          class="mb-0!">
          <a-select
            v-model="formState.site_id"
            placeholder="请选择站点"
            allow-search
            @dropdown-reach-bottom="handleReachBottom">
            <a-option
              v-for="item in siteList"
              :key="item.id"
              :label="item.domain"
              :value="item.id"></a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </CloudDialog>
    <ApplyLog
      v-model:visible="logVisible"
      v-model:record="logData"
      @refresh-row="(row) => emit('refresh-row', row)"></ApplyLog>
  </section>
</template>
<script lang="ts" setup>
import { postApiCertObtainApi } from '@/apis/modules/license'
import { getApiSiteQueryApi } from '@/apis/modules/site/site'
import ApplyLog from './ApplyLog.vue'
import type { FormInstance } from '@arco-design/web-vue'
import type { LicenseListItem } from '@/apis/model/License'
import type { CloudFilterBarState } from '@/components/filter-bar/types'
import type { SiteListItem } from '@/apis/model/site'

const { visible: logVisible, open: openLog, data: logData } = usePopup()
const visible = defineModel<boolean>('visible', { required: true })
// 刷新表格事件
interface IEmit {
  (event: 'reload'): void
  (event: 'refresh-row', value: LicenseListItem): void
}
const emit = defineEmits<IEmit>()
const formRef = ref<FormInstance>()
const formState = reactive({
  site_id: ''
})
const params = ref<CloudFilterBarState>({
  order: 'desc',
  sort: 'created_at'
})
const siteList = ref<SiteListItem[]>([])
const pagination = reactive({
  offset: 0,
  limit: 15,
  total: 0
})

const getSiteList = (type: 1 | 2) => {
  getApiSiteQueryApi({ ...params.value, ...pagination }).then((res) => {
    pagination.total = res?.total || 0
    if (type === 1) return (siteList.value = res?.list || [])
    siteList.value = siteList.value?.concat(res?.list || [])
  })
}
const handleReachBottom = () => {
  if (pagination.total <= siteList.value?.length) return
  pagination.offset += 15
  getSiteList(2)
}
const handleOpen = () => getSiteList(1)
const handleSubmit = async () => {
  const error = await formRef.value?.validate()
  if (error) return false
  const res = await postApiCertObtainApi({
    site_id: formState.site_id,
    force: true
  })
  const site_domain = siteList.value.find(
    (item) => item.id == formState.site_id
  )?.domain
  openLog({
    id: res.id,
    site_domain
  })
  emit('reload')
}
const handleClose = () => {
  formRef.value?.resetFields()
  Object.assign(pagination, { offset: 0, limit: 15, total: 0 })
}
</script>
